<template>
<view>
<template name="tp6">
    <view class="card5-box">
        <view class="card3-item">
            <view class="f-title-xl">{{userInfo.name}}</view>
            <view @tap="myself&&!userInfo.position?'goUrl':''" class="f-caption  mt-md mb-xxl" data-url="/pages/card/add/add?active=0">{{userInfo.position?userInfo.position:myself?'点击填写职位':'未填写职位'}}</view>
            <view @tap="myself&&!userInfo.company_name?'goUrl':''" class="f-caption ellipsis" data-url="/pages/card/add/add?active=0">{{userInfo.company_name?userInfo.company_name:myself?'点击填写公司':'未填写公司'}}
      </view>
            <view @tap="myself&&!userInfo.tel?'goUrl':''" class="f-caption  mt-md" data-url="/pages/card/add/add?active=0">{{userInfo.tel||'未填写电话'}}
      </view>
            <view @tap="myself&&!userInfo.mini_address?'goUrl':''" class="f-caption  mt-md ellipsis" data-url="/pages/card/add/add?active=0">{{userInfo.mini_address||'未填写地址'}}
      </view>
            <image class="card3-box_img" :src="userInfo.person_avatar||userInfo.person_avatar_thumb||'/images/icon/default.svg'"></image>
        </view>
        <image class="card5-box_bg" src="/static/images/card/card6-bg.png"></image>
    </view>
</template>
<template name="tp5">
    <view class="card5-box">
        <view class="card5-box_item ">
            <image class="card5-box_img" :src="userInfo.person_avatar||userInfo.person_avatar_thumb||'/images/icon/default.svg'"></image>
            <view class="card5-name">{{userInfo.name}}</view>
            <view @tap="myself&&!userInfo.tel?'goUrl':''" class="f-caption mt-md" data-url="/pages/card/add/add?active=0">
        {{userInfo.tel||'未填写电话'}}
      </view>
            <view class="flex-y-center mt-md">
                <view @tap="myself&&!userInfo.position?'goUrl':''" class="f-caption" data-url="/pages/card/add/add?active=0">{{userInfo.position?userInfo.position:myself?'点击填写职位':'未填写职位'}}</view>
                <view class="shu"></view>
                <view @tap="myself&&!userInfo.company_name?'goUrl':''" class="f-caption flex-1 ellipsis" data-url="/pages/card/add/add?active=0">
          {{userInfo.company_name?userInfo.company_name:myself?'点击填写公司':'未填写公司'}}
        </view>
            </view>
            <view @tap="myself&&!userInfo.mini_address?'goUrl':''" class="f-caption mt-md ellipsis" data-url="/pages/card/add/add?active=0">
        {{userInfo.mini_address||'未填写地址'}}
      </view>
        </view>
        <image class="card5-box_bg" src="/static/images/card/card5-bg.png"></image>
    </view>
</template>
<template name="tp4">
    <view class="card4-box">
        <view class="card4-item">
            <view class="f-title-xl">{{userInfo.name}}</view>
            <view @tap="myself&&!userInfo.position?'goUrl':''" class="f-caption mt-md mb-xxl" data-url="/pages/card/add/add?active=0">{{userInfo.position?userInfo.position:myself?'点击填写职位':'未填写职位'}}</view>
            <view @tap="myself&&!userInfo.company_name?'goUrl':''" class="f-caption ellipsis" data-url="/pages/card/add/add?active=0">
        {{userInfo.company_name?userInfo.company_name:myself?'点击填写公司':'未填写公司'}}
      </view>
            <view @tap="myself&&!userInfo.tel?'goUrl':''" class="f-caption mt-md" data-url="/pages/card/add/add?active=0">
        {{userInfo.tel||'未填写电话'}}
      </view>
            <view @tap="myself&&!userInfo.mini_address?'goUrl':''" class="f-caption mt-md ellipsis" data-url="/pages/card/add/add?active=0">
        {{userInfo.mini_address||'未填写地址'}}
      </view>
        </view>
        <image class="card4-box_img" :src="userInfo.person_avatar||userInfo.person_avatar_thumb||'/images/icon/default.svg'"></image>
        <image class="card4-box_bg" src="/static/images/card/card4-bg.png"></image>
    </view>
</template>
<template name="tp3">
    <view class="card3-box">
        <view class="card3-item">
            <view class="f-title-xl">{{userInfo.name}}</view>
            <view @tap="myself&&!userInfo.position?'goUrl':''" class="f-caption c-caption mt-md mb-xxl" data-url="/pages/card/add/add?active=0">{{userInfo.position?userInfo.position:myself?'点击填写职位':'未填写职位'}}</view>
            <view @tap="myself&&!userInfo.company_name?'goUrl':''" class="f-caption c-caption ellipsis" data-url="/pages/card/add/add?active=0">
        {{userInfo.company_name?userInfo.company_name:myself?'点击填写公司':'未填写公司'}}
      </view>
            <view @tap="myself&&!userInfo.tel?'goUrl':''" class="f-caption c-caption mt-md" data-url="/pages/card/add/add?active=0">
        {{userInfo.tel||'未填写电话'}}
      </view>
            <view @tap="myself&&!userInfo.mini_address?'goUrl':''" class="f-caption c-caption mt-md ellipsis" data-url="/pages/card/add/add?active=0">
        {{userInfo.mini_address||'未填写地址'}}
      </view>
            <image class="card3-box_img" :src="userInfo.person_avatar||userInfo.person_avatar_thumb||'/images/icon/default.svg'"></image>
        </view>
    </view>
</template>
<template name="tp2">
    <view class="card2-img-box">
        <image class="card2-img" :src="userInfo.person_avatar||userInfo.person_avatar_thumb||'/images/icon/default.svg'"></image>
        <view class="card2-head">
            <view class="flex-y-center">
                <view class="flex-1">
                    <view class="flex-y-center">
                        <view class="f-title-xl">{{userInfo.name}}</view>
                    </view>
                    <view @tap="myself&&!userInfo.position?'goUrl':''" class="mt-md" data-url="/pages/card/add/add?active=0">{{userInfo.position?userInfo.position:myself?'点击填写职位':'未填写职位'}}</view>
                </view>
                <image class="avatar" :src="userInfo.company_logo_thumb||userInfo.company_logo||'/images/icon/default.svg'"></image>
            </view>
            <view class="card2-user-info">
                <view @tap="myself&&!userInfo.company_name?'goUrl':''" class="flex-y-center" data-url="/pages/card/add/add?active=0">
                    <image class="icon-md" src="/static/images/card/home.png"></image>
                    <view class="flex-1 ml-sm ellipsis">
            {{userInfo.company_name?userInfo.company_name:myself?'点击填写公司':'未填写公司'}}
          </view>
                </view>
                <view @tap="myself&&!userInfo.tel?'goUrl':''" class="flex-y-center mt-sm" data-url="/pages/card/add/add?active=0">
                    <image class="icon-md" src="/static/images/card/call.png"></image>
                    <view class="flex-1 ml-sm ">
            {{userInfo.tel||'未填写电话'}}
          </view>
                </view>
                <view @tap="myself&&!userInfo.mini_address?'goUrl':''" class="flex-y-center mt-sm" data-url="/pages/card/add/add?active=0">
                    <image class="icon-md" src="/static/images/card/address.png"></image>
                    <view class="flex-1 ml-sm ellipsis">
            {{userInfo.mini_address||'未填写地址'}}
          </view>
                </view>
            </view>
        </view>
    </view>
    <view style="height:130rpx;background:#fff;z-index:-2;position:relative"></view>
</template>
<template name="tp1">
    <view class="card1-head-box">
        <view class="card1-head">
            <image class="card1-head-img skeletons-rect" :src="userInfo.person_avatar||'/images/icon/default.svg'"></image>
            <view class="flex-center pd-lg">
                <view class="skeletons-rect">
                    <image class="avatar" :src="userInfo.company_logo_thumb||'/images/icon/default.svg'"></image>
                </view>
                <view class="ml-lg  flex-1 ellipsis">
                    <view class="flex-y-baseline ">
                        <view class="flex-y-center">
                            <view class="f-title-lg c-title skeletons-rect">{{userInfo.name}}</view>
                        </view>
                        <view @tap="myself&&!userInfo.position?'goUrl':''" class="skeletons-rect c-caption f-caption ml-md ellipsis" data-url="/pages/card/add/add?active=0">{{userInfo.position?userInfo.position:myself?'点击填写职位':'未填写职位'}}</view>
                    </view>
                    <view @tap="myself&&!userInfo.company_name?'goUrl':''" class="skeletons-rect c-caption f-paragraph flex-1 ellipsis" data-url="/pages/card/add/add?active=0">{{userInfo.company_name?userInfo.company_name:myself?'点击填写公司':'未填写公司'}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
</view>
</template>

<style>
.card1-head-box {
    padding: 0rpx 32rpx 20rpx;
    background: #fff;
}

.card1-head {
    box-shadow: 0 3rpx 15rpx rgba(0,0,0,0.13);
}

.card1-head-img {
    width: 686rpx;
    height: 686rpx;
    display: block;
}

.card2-head {
    position: absolute;
    top: 510rpx;
    margin: 0 32rpx;
    width: 686rpx;
    background: #fff;
    border-radius: 16rpx;
    line-height: 1;
    box-shadow: 0 3rpx 15rpx rgba(0,0,0,0.13);
    z-index: 1;
    padding: 58rpx 65rpx 0;
}

.card2-img-box {
    width: 750rpx;
    height: 750rpx;
    z-index: -1;
    position: relative;
}

.card2-img {
    width: 100%;
    height: 100%;
}

.card2-user-info {
    padding: 40rpx 0 40rpx;
    background: #fff;
    font-size: 24rpx;
    line-height: 36rpx;
    color: #888;
}

.card3-box {
    padding: 32rpx 32rpx 0;
    background: #fff;
    line-height: 1;
}

.card3-item {
    height: 380rpx;
    border: 1px solid #eee;
    border-radius: 10rpx;
    box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.03);
    padding: 58rpx 64rpx;
    position: relative;
    z-index: 10;
}

.mb-xxl {
    margin-bottom: 64rpx;
}

.card3-box_img {
    position: absolute;
    right: 64rpx;
    top: 58rpx;
    border-radius: 8rpx;
    width: 96rpx;
    height: 96rpx;
}

.card4-box {
    padding: 32rpx 32rpx 0;
    background: #fff;
    line-height: 1;
    color: white;
    position: relative;
    height: 412rpx;
    width: 750rpx;
}

.card4-item {
    width: 686rpx;
    height: 380rpx;
    border-radius: 16rpx;
    box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
    padding: 58rpx 64rpx;
    position: absolute;
    z-index: 10;
}

.card4-box_img {
    width: 380rpx;
    height: 380rpx;
    position: absolute;
    right: 32rpx;
    top: 32rpx;
    border-radius: 0 16rpx 16rpx 0;
}

.card4-box_bg {
    width: 411rpx;
    height: 380rpx;
    position: absolute;
    left: 32rpx;
    top: 32rpx;
    border-radius: 16rpx 0 0 16rpx;
}

.card5-box {
    padding: 32rpx 32rpx 0;
    background: #fff;
    line-height: 1;
    color: white;
    position: relative;
    height: 412rpx;
    width: 750rpx;
}

.card5-box_item {
    width: 686rpx;
    height: 380rpx;
    border-radius: 16rpx;
    box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
    padding: 0 32rpx;
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card5-box_img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
}

.card5-box_bg {
    width: 686rpx;
    height: 380rpx;
    position: absolute;
    left: 32rpx;
    top: 32rpx;
    border-radius: 16rpx 0 0 16rpx;
}

.card5-name {
    display: inline-block;
    line-height: 36rpx;
    background: #fff;
    color: #d3b52a;
    text-align: center;
    border-radius: 20rpx;
    font-size: 24rpx;
    margin-top: -20rpx;
    margin-bottom: 10rpx;
    padding: 0 30rpx;
}

.shu {
    position: relative;
}

.shu::before {
    content: "|";
    margin: 0 20rpx;
}

.card6-bg {
    background: linear-gradient(to right,#1f2026,#2c2d31);
    color: #fff;
}
</style>